<template>
    <div class="app-container">
        <avue-crud ref="crud" :data="data" :page="page" :option="tableOption"  @row-update="handleUpdate" @search-change="getList"
          @refresh-change="handleRefreshChange" @row-save="handleSave" @row-del="handleDel" @size-change="sizeChange" @current-change="currentChange">
       </avue-crud>
    </div>
</template>

<script>

import { fetchList, addObj, putObj, delObj,initPerm } from '@/api/sys_system_sitepage'
import { mapGetters } from 'vuex'

export default {
    name: 'crud',
    computed: {
        ...mapGetters(['permissions'])
    },
    data() { 
      return {
	    data:[],
		page:{ currentPage: 1,
		       total: 0,
		       pageSize: 10},
	    tableOption:{
	      "border": true,
	      "index": false,
	      "expand": false,
	      "stripe": true,
	      "selection": false,
	      "page": true,
	      "menuAlign": "center",
	      "align": "center",
	      "searchSize":"small",
	      "addBtn":false,
	      "editBtn":false,
	      "delBtn":false,
		    "dicUrl":"/admin/system/dict/types/{{key}}",
	      "column": [
	           {
		          "label": "id",
		          "prop": "id",
		          "span": 12,
		          "addVisdiplay":false,
		          "editVisdiplay":false,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "formatter":function(row, value , label, column){
				    if("number" ===typeof value) return value.toString();
				  },
		          "rules": [{
			        "required": true,
			        "message": "请输入id",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "父级id",
		          "prop": "pid",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "formatter":function(row, value , label, column){
				    if("number" ===typeof value) return value.toString();
				  },
		          "rules": [{
			        "required": true,
			        "message": "请输入父级id",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "页面名称",
		          "prop": "name",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
		          "rules": [{
			        "required": true,
			        "message": "请输入页面名称",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "别名",
		          "prop": "nid",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined
		        },
	           {
		          "label": "真实路由",
		          "prop": "router",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
		          "rules": [{
			        "required": true,
			        "message": "请输入真实路由",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "页面类型",
		          "prop": "type",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"select",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
		          "dicData":"page_type",
		          "rules": [{
			        "required": true,
			        "message": "请输入页面类型",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "页面标题",
		          "prop": "title",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
		          "rules": [{
			        "required": true,
			        "message": "请输入页面标题",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "页面关键词",
		          "prop": "keywords",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined
		        },
	           {
		          "label": "页面描述",
		          "prop": "description",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":true
		        },
	           {
		          "label": "页面内容",
		          "prop": "contents",
		          "span": 24,
		          "maxRow":10,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"ueditor",
		          "sortable": false,
		          "search":false,
		          "hide":true,
		          "rules": [{
			        "required": true,
			        "message": "请输入页面内容",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "页面跳转url",
		          "prop": "url",
		          "span": 24,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"input",
		          "sortable": false,
		          "search":false,
		          "hide":undefined
		        },
	           {
		          "label": "备注",
		          "prop": "remark",
		          "span": 24,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"textarea",
		          "sortable": false,
		          "search":false,
		          "hide":undefined
		        },
	           {
		          "label": "是否系统设置",
		          "prop": "isSystemSet",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_status",
		          "rules": [{
			        "required": true,
			        "message": "请输入是否系统设置",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "是否主导航",
		          "prop": "isMainNav",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_status",
		          "rules": [{
			        "required": true,
			        "message": "请输入是否主导航",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "是否尾部导航",
		          "prop": "isFootNav",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_status",
		          "rules": [{
			        "required": true,
			        "message": "请输入是否尾部导航",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "排序",
		          "prop": "sortIndex",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"number",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
		          "rules": [{
			        "required": true,
			        "message": "请输入排序",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "状态",
		          "prop": "status",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_view",
		          "rules": [{
			        "required": true,
			        "message": "请输入状态",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "是否在新窗口打开",
		          "prop": "isBlank",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_status",
		          "rules": [{
			        "required": true,
			        "message": "请选择是否在新窗口打开",
			        "trigger": "blur"
		          }]
		        },
	           {
		          "label": "是否推荐",
		          "prop": "recommend",
		          "span": 12,
		          "addVisdiplay":true,
		          "editVisdiplay":true,
		          "type":"radio",
		          "sortable": false,
		          "search":false,
		          "hide":undefined,
				  "dicData":"common_status",
		          "rules": [{
			        "required": true,
			        "message": "请选择是否推荐",
			        "trigger": "blur"
		          }]
		        },
	      ]
	    },
      }
    },
    created(){
    	this.getList()
    	initPerm(this.tableOption,this.permissions)
    },
    methods: {
	    handleDel: function(row, index) {
	        var _this=this;
	        
	        this.$confirm("是否确认删除记录" , "提示", {
			    confirmButtonText: "确定",
			    cancelButtonText: "取消",
			    type: "warning"
	        })
	        .then(function() {
	          delObj(row).then(response => {
	        	_this.getList()
		        _this.$notify({
		          title: '成功',
		          message: '删除成功',
		          type: 'success',
		          duration: 2000
		        })
	          })
	        })
	        .catch(function(err) {});
	    },
	    handleUpdate: function(row, index, done) {
	    	var _this=this;
	        putObj(row).then(() => {
	        _this.getList()
	        _this.$notify({
			    title: '成功',
			    message: '修改成功',
			    type: 'success',
			    duration: 2000
	          })
	        })
	        done();
	    },
	    handleSave: function(row, done) {
	      var _this=this;
	      addObj(row).then(() => {
		        _this.dialogFormVisible = false
		        _this.getList()
		        _this.$notify({
			        title: '成功',
			        message: '创建成功',
			        type: 'success',
			        duration: 2000
	        })
	      })
	      done();
	    },
	    getList(form){
	      if(!form&&this.$refs.crud)
	        form=this.$refs.crud.searchForm
	      fetchList(Object.assign({}, form, { page: `${this.page.currentPage}`,limit:`${this.page.pageSize}` }))
	        .then(response => {
			    this.data = response.data.records
			    this.page.total = response.data.total
			    this.page.currentPage = response.data.current
	      })
	    },
	    handleRefreshChange(page) {
	      this.getList();
	    },
	    sizeChange(val) {
	        this.page.currentPage = 1
	        this.page.pageSize = val
	        this.getList()
	    },
	    currentChange(val) {
	        this.page.currentPage = val
	        this.getList()
	    }
    }
}
</script>
